<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影《震耳欲聋》-主题页面</title>
    <!--引入css样式-->>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--1.头部区域：电影标题+宣传语-->>
    <hesder class="header">
        <div class="header-content">
            <h1>电影《震耳欲聋》</h1>
            <p>用声音打破沉默，用勇气直面真相</p>
        </div>
    </hesder>
    <!--2.导航区域：页面内跳转链接-->
    <nav class="navigator">
        <ul>
            <li><a href="#intro">电影简介</a></li>
            <li><a href="#cast">主要角色</a></li>
            <li><a href="#gallery">电影海报</a></li>
            <li><a href="#comment">观众评论</a></li>
        </ul>
    </nav>
    <!--3.主体区域：分4个模块对应导航-->
    <main class="body-content">
        <!--3.1电影简介模块-->
        <section id="intro" class="section intro-section">
            <h2>电影简介</h2>
            <div class="intro-content">
                <img src="https://www.entbao.com.cn/zb_users/upload/2025/10/202510061644407901959.jpg" alt="《震耳欲聋》电影海报" class="intro-img">
                <div class="intro-text">
                    <p>该片是国内首部聚焦聋人群体反诈题材的现实主义电影讨论,讲述出身聋人家庭的CODA律师李淇(檀健次 饰)被卷入聋人定制房产骗局后，
                        在利益诱惑与良知觉醒间挣扎破局的故事，通过道德与良知的审判揭示聋人群体因信息壁垒和沟通障碍面临的系统性诈骗困境，并探讨信任危机、阶层差异与人性挣扎等社会议题
                        。影片全片30%对白为手语,采用低频音效模拟聋人听觉体验,冷暖色调映射角色心理 。</p>
                    <p><strong>上映时间</strong>:2025年10月1日.(中国大陆)</p>
                    <p><strong>导演</strong>：万力</p>
                    <p><strong>类型</strong>:剧情/犯罪</p>
                    <button class="btn ticket-btn">立即购票</button>
                </div>
            </div>
        </section>
        <!--3.2主要角色模块-->
        <section id="cast" class="section cast-section">
            <h2>主要角色</h2>
            <div class="cast-list">
                <div class="cast-item">
                    <img src="1.jpg" alt="李淇（主角）">
                    <h3>李淇</h3>
                    <p>他出身聋人家庭,但作为健听人(CODA),长期游离于聋人群体之外，通过个人努力成为律师事务所的执业律师。</p>
                </div>
                <div class="cast-item">
                    <img src="6.jpg"alt="张小蕊">
                    <h3>张小蕊</h3>
                    <p>聋人女孩，遭遇诈骗后求助李淇，其质问推动李淇转变，是撬动主角良知的关键人物。‌‌</p >
                </div>
                <div class="cast-item">
                    <img src="3.jpg" alt="张小晨（张小蕊的哥哥）">
                    <h3>张小晨</h3>
                    <p>张小蕊的哥哥,为保护妹妹伤人被捕,李淇无偿援助使其刑期从5年减至6个月.</p >
                </div>
            </div>
        </section>

        <!-- 3.3 精彩海报模块 -->
        <section id="gallery" class="section gallery-section">
            <h2>精彩海报</h2>
            <div class="gallery-list">
                <img src="1.jpg" alt="海报1:无声的呐喊" class="gallery-img">
                <img src="5.jpg" alt="海报2:真相的碎片" class="gallery-img">
                <img src="2.jpg" alt="海报3:并肩前行" class="gallery-img">
                <img src="7.jpg" alt="海报4:最终对峙" class="gallery-img">
            </div>
        </section>

        <!-- 3.4 观众评论模块（含表单） -->
        <section id="comment" class="section comment-section">
            <h2>观众评论</h2>
            <!-- 评论表单 -->
            <form id="comment-form" class="comment-form">
                <div class="form-group">
                    <label for="username">您的姓名</label>
                    <input type="text" id="username" required placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="user-rating">评分(1-5星)</label>
                    <select id="user-rating" required>
                        <option value="5">5星(强烈推荐)</option>
                        <option value="4">4星(推荐)</option>
                        <option value="3">3星(一般)</option>
                        <option value="2">2星(不推荐)</option>
                        <option value="1">1星(非常不推荐)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="user-comment">您的评论</label>
                    <textarea id="user-comment" rows="4" required placeholder="请分享您的观影感受..."></textarea>
                </div>
                <button type="submit" class="btn submit-btn">提交评论</button>
            </form>

            <!-- 已提交的评论展示区 -->
            <div id="comment-list" class="comment-list">
                <div class="comment-item">
                    <h4>小明 <span class="rating">5星</span></h4>
                    <p>电影太震撼了！主角的“无声视角”让我重新理解“真相”，结尾的反转完全没想到，推荐所有人去看！</p >
                </div>
                <div class="comment-item">
                    <h4>李华 <span class="rating">4星</span></h4>
                    <p>剧情节奏很稳，演员演技在线，尤其是主角用手语表达情绪的片段，特别有感染力，唯一不足是部分细节有点拖沓。</p >
                </div>
   
</body>
</html>